<template>
			<view class="w-picker">
				<view class="mask" :class="{'show':showCity}" @tap="maskTap" @touchmove.stop.prevent catchtouchmove="true"></view>
				<view class="w-picker-cnt" :class="{'show':showCity}" v-if="showCity">
					<view class="w-picker-hd" @touchmove.stop.prevent catchtouchmove="true">
							<view class="w-picker-btn" @click="pickerCancel">取消</view>
							<view class="w-picker-btn" style="color:var(--mainColor)" @click="pickerConfirm">确定</view>
					</view>
					<view class="w-picker-view">
							<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd">
								<picker-view-column>
									<view class="w-picker-item" v-for="(item,index) in provinces" :key="index">{{item.label}}</view>
								</picker-view-column>
								<picker-view-column>
									<view class="w-picker-item" v-for="(item,index) in citysData" :key="index">{{item.label}}</view>
								</picker-view-column>
								<!-- <picker-view-column v-if="!hideArea">
									<view class="w-picker-item" v-for="(item,index) in areas" :key="index">{{item.label}}</view>
								</picker-view-column> -->
							</picker-view>
					</view>
				</view>
			</view>
</template>

<script>
		export default {
			props:{
				pickVal: {
					type:Array,
					default: []
				},
				showCity:{//隐藏省市区三级联动   地区列
					type:Boolean,
					default:false
				},
				provinces: {
					type:Array,
					default(){
						return [];
					}
				},
				citys: {
					type:Array,
					default(){
						return [];
					}
				},
				callback: {
					type: Function
				}
			},
			data(){
				return{
					itemHeight:`height: ${uni.upx2px(88)}px;`,
					showPicker:false,
					confirmFlag: true,
					citysData: []
				}
			},
			watch:{
				pickVal:{
					handler (val) {
						this.citysData = this.citys[val[0]];
					},
					immediate: true
				}
			},
			methods:{
				touchStart(){
					if(this.timeout){
						this.confirmFlag=false;
					}
				},
				touchEnd(){
					if(this.timeout){
						setTimeout(()=>{
							this.confirmFlag=true;
						},500)
					}
				},
				bindChange(val){
					let _this=this;
					let arr=val.detail.value;
					console.log(arr);
					this.$emit("update:pickVal",arr);
				},
				pickerCancel(){
					this.$emit("update:showCity",false);
				},
				pickerConfirm(e){
					let { provinces,citys,citysData,pickVal } = this;
					
					if(!this.confirmFlag){
						return;
					}
					
					this.$emit("update:showCity",false);
					this.callback(provinces[pickVal[0]],citysData[pickVal[1]]);
				},
				maskTap(){
					this.$emit("update:showCity",false);
					this.showPicker = false;
				}
			}
		}
</script>

<style lang="scss">
		.w-picker{
			position: relative;
			z-index: 888;
			
			.mask {
			  position: fixed;
			  z-index: 1000;
			  top: 0;
			  right: 0;
			  left: 0;
			  bottom: 0;
			  background: rgba(0, 0, 0, 0.6);
			  visibility: hidden;
			  opacity: 0;
			  transition: all 0.3s ease;
			}
			.mask.show{
				visibility: visible;
				opacity: 1;
			}
			.w-picker-cnt {
			  position: fixed;
			  bottom: 0;
			  left: 0;
			  width: 100%;
			  transition: all 0.3s ease;
			  transform: translateY(100%);
			  z-index: 3000;
			}
			.w-picker-cnt.show {
			  transform: translateY(0);
			}
			.w-picker-hd {
			  display: flex;
			  align-items: center;
			  padding: 0 30upx;
			  height: 88upx;
			  background-color: #fff;
			  position: relative;
			  text-align: center;
			  font-size: 32upx;
			  justify-content: space-between;
			  .w-picker-btn{
			  	font-size: 30upx;
			  }
			}
			
			.w-picker-hd:after {
			  content: ' ';
			  position: absolute;
			  left: 0;
			  bottom: 0;
			  right: 0;
			  height: 1px;
			  border-bottom: 1px solid #e5e5e5;
			  color: #e5e5e5;
			  transform-origin: 0 100%;
			  transform: scaleY(0.5);
			}
			.w-picker-item {
			  text-align: center;
			  width: 100%;
			  height: 88upx;
			  line-height: 88upx;
			  text-overflow: ellipsis;
			  white-space: nowrap;
			  font-size: 30upx;
			}
			.w-picker-view {
			  width: 100%;
			  height: 476upx;
			  overflow: hidden;
			  background-color: rgba(255, 255, 255, 1);
			  z-index: 666;
			}
			picker-view{
				height: 100%;
			}
		}
</style>
